<template>
    <div class="tenant">
        <el-form ref="ruleFormRef" :model="options" label-width="auto" status-icon>
            <el-row>                
                <el-col :span="6">
                    <el-form-item style="margin-right: 20px;" label="学校名称" prop="keyword">
                        <el-input v-model.trim="options.keyword" placeholder="请输入学校名称" clearable/>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item>
                        <el-button :icon="Search" type="primary" @click="onSearch">
                            搜索
                        </el-button>

                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>


        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain :icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>


        
        <div class="tenantCon">
            <el-table v-loading="loading" :data="listData">

                <el-table-column label="租户编号" align="center" prop="tenant_id" min-width="8%" />
                <el-table-column label="学校logo" align="center" min-width="6%">
                    <template #default="scope">
                        <div style="display: flex; align-items: center; padding: 10px 0; justify-content: center;">
                            <el-image style="width: 80px; height: 80px;" :src="scope.row.logo_url" fit="cover" />
                        </div>
                    </template>

                </el-table-column>

                <el-table-column label="学校名称" align="center" prop="tenant_name" min-width="8%" />
                <el-table-column label="学院名称" align="center" prop="college_name" min-width="8%" />
                <el-table-column label="管理员账号" align="center" prop="user_name" min-width="8%" />
                <el-table-column label="学校负责人" align="center" prop="contact_person" min-width="6%" />
                <el-table-column label="联系电话" align="center" prop="contact_phone" min-width="6%" />
                <el-table-column label="创建人" align="center" prop="created_by" min-width="6%" />
                <el-table-column label="过期时间" align="center" prop="expire_date" min-width="6%" />
                <el-table-column label="租户状态" align="center" min-width="6%">
                    <template #default="scope">
                        <el-tag :type="scope.row.is_active ? 'success' : 'danger'">
                            {{ scope.row.is_active ? '正常' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                

                <el-table-column label="操作" align="center" min-width="8%" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button 
                            v-if="scope.row.tenant_id !== 1"
                            type="primary" 
                            link 
                            @click="handleEdit(scope.row)"
                        >编辑</el-button>
                        <el-button 
                            v-if="scope.row.tenant_id !== 1"
                            type="primary" 
                            link 
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                        <span v-else class="disabled-text">系统租户</span>
                    </template>
                </el-table-column>
            </el-table>

        </div>


        <!-- 分页查询 -->
        <div class='pagelist'>
            <el-pagination hide-on-single-page :current-page='options.page_num' @current-change='currentChange'
                background layout='prev, pager, next' :total='pageTotal' :page-size='options.page_size' />
        </div>


        <tenantPopup ref="tenantPopRef" @success="getTenant"></tenantPopup>

    </div>
</template>

<script setup>
import tenantPopup from "./children/tenantPopup.vue"
import {
  Plus,
  Search
} from '@element-plus/icons-vue'
import { getTenantList, tenantDelete } from '@/api/admin/tenant'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref } from 'vue'

const options = ref({    
    page_size: 10,
    page_num: 1,
    keyword: ""    
})
const pageTotal = ref(0)
const tenantPopRef = ref(null)
const listData = ref([])
const loading = ref(false)

// 搜索时重置页码
const onSearch = () => {
    options.value.page_num = 1
    getTenant()
}

const handleAdd = () => {
    tenantPopRef.value.open()
}

const currentChange = (val) => {
    options.value.page_num = val
    getTenant()
}

const getTenant = async () => {
    loading.value = true
    try {
        const res = await getTenantList({
            page_num: options.value.page_num,
            page_size: options.value.page_size,
            keyword: options.value.keyword
        })
        listData.value = res.list || []
        pageTotal.value = res.total_count || 0
    } catch(error) {
        console.error('获取租户列表失败:', error)
        ElMessage.error('获取租户列表失败')
    } finally {
        loading.value = false
    }
}

const handleEdit = (row) => {
    if(row.tenant_id === 1) {
        ElMessage.warning('系统租户不允许编辑')
        return
    }
    tenantPopRef.value.open(row)
}

const handleDelete = (row) => {
    if(row.tenant_id === 1) {
        ElMessage.warning('系统租户不允许删除')
        return
    }
    ElMessageBox.confirm('确认要删除该租户吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            const res = await tenantDelete(row.tenant_id)
            if(res) {
                ElMessage.success('删除成功')
                getTenant()
            } else {
                ElMessage.error(res.msg || '删除失败')
            }
        } catch(error) {
            console.error('删除租户失败:', error)
            ElMessage.error('删除失败')
        }
    }).catch(() => {
        // 取消删除
    })
}

// 初始化加载数据
getTenant()
</script>

<style lang="scss" scoped>
.tenant{
    padding-top: 30px;
    position: relative;
    z-index: 0;
    
}

.disabled-text {
    color: #909399;
    font-size: 14px;
}
</style>